<template>
  <div class="payment">
    <page-header title="支付"></page-header>

    <scroll class="contentOne">
      <div class="detaisOne">
        <h1><i class="iconfont icon-zhifuxinxi"></i>确认信息</h1>
        <div class="jibenxinxi" v-if="apply">
          <p><label>预约号：</label> <span class="detailsmessage">{{apply.payid}}</span></p>
          <p><label>活动名称：</label> <span class="detailsmessage">{{apply.activity.name}}</span></p>
          <p><label>学生姓名：</label> <span class="detailsmessage zhuangtai">{{apply.member.name}}</span></p>
          <p><label>活动时间：</label> <span class="detailsmessage">{{apply.activity.startTime}}</span></p>
          <p><label>活动地点：</label> <span class="detailsmessage">{{apply.activity.acplace}}</span></p>
          <p><label>购买数量：</label> <span class="detailsmessage">{{apply.numb}}</span></p>
          <p><label>单<span class="widthnbsp"></span>价：</label> <span class="detailsmessage">{{apply.activity.money}}元</span></p>
          <p><label>优<span class="widthnbsp"></span>惠：</label> <span class="detailsmessage">{{apply.discount ? apply.discount : 0}}元</span></p>
          <p><label>费<span class="widthnbsp"></span>用：</label> <span class="detailsmessage zhuangtai">{{apply.money}}元</span></p>
        </div>
      </div>
    </scroll>
    <div class="paymentBtn weixin" @click="wxpay()" v-if="apply.status == 1">微信支付</div>
  </div>
</template>

<script type="text/ecmascript-6">
  import PageHeader from 'components/page-header'
  import Scroll from 'components/scroll/scroll'
  import * as exampleApi from 'api/example'
  import wx from 'weixin-js-sdk'
  import { commonOption } from 'api/config'

  export default {
    components: {
      PageHeader,
      Scroll
    },
    data () {
      return {
        id: '',
        appId: '',
        siteId: '',
        appKey: '',
        paySignObj: {},
        apply: null
      }
    },
    created () {
      this.id = this.$route.params.id
      this.appId = sessionStorage.getItem('appId')
      this.getAppKey()
      this.getApply()
    },
    methods: {
      getAppKey() {
        exampleApi.modeGet2(commonOption.payment_host + '/app/getAppKey?appId=' + this.appId, {
        }).then(res => {
          this.appKey = res.data.appKey
        })
      },
      comeBack () {
        window.history.go(-1)
      },
      getApply() {
        exampleApi.modePost('/api/public/wz/activity/getApply', {
          id: this.id
        }).then(response => {
          if (response.data.code === '0') {
            this.apply = response.data.data.apply
            if (this.apply.status !== '1') {
              alert('订单状态错误，无法支付，订单状态：' + this.apply.status)
            }
          } else {
            alert(response.data.msg)
          }
        })
      },
      wxpay () {
        let sj = this.apply.payid
        let name = this.apply.payid
        let money = this.apply.money
        let thisPageUrl = commonOption.payment_host + '/wz/index.html'
        exampleApi.modePost2(commonOption.payment_host + '/wxConfig', {
          'url': thisPageUrl,
          'appId': this.appId
        }).then(res => {
          wx.config({
            'debug': false,
            'appId': res.data.obj.appid,
            'timestamp': res.data.obj.timestamp,
            'nonceStr': res.data.obj.nonceStr,
            'signature': res.data.obj.signature,
            'jsApiList': ['chooseWXPay']
          })
          let ticketId = sessionStorage.getItem('ticketId')
          let callBackUrl = commonOption.host + '/api/public/wz/activity/Order'
          if (ticketId !== null && ticketId !== '') {
            callBackUrl += '?ticketId=' + ticketId
          }
          exampleApi.modePost2(commonOption.payment_host + '/api', {
            'appKey': this.appKey,
            'type': '11',
            'callBackUrl': callBackUrl,
            'openid': sessionStorage.getItem('openId'),
            'orderInfo': '{"count": "1" ,"product_id":"' + sj + '","callBackUrl":"' + callBackUrl + '","product_name": "' + name + '","product_detail": "' + name + '","price":' + money + '}'
          }).then(res => {
            if (res.data.code === 200) {
              this.paySignObj = res.data
              this.callPay()
            } else {
              alert('提交订单失败！')
            }
          })
        })
      },
      callPay () {
        var _this = this
        wx.chooseWXPay({
          timestamp: _this.paySignObj.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: _this.paySignObj.data.nonceStr, // 支付签名随机串，不长于 32 位
          package: _this.paySignObj.data.packageStr, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
          signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: _this.paySignObj.data.paySign, // 支付签名
          success: function (res) {
            alert('支付成功！')
            _this.$router.push({path: '/home'})
          },
          fail: function (res) {
            alert('fail, 支付失败请重新下单')
          },
          cencel: function () {
            alert('cancel, 支付失败请重新下单')
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .payment {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
    .contentOne {
      border-bottom: 10px solid #e6e6e6;
      background-color: #ffffff;
      .detaisOne {
        text-align: left;
        margin: 0px 24px;
        h1 {
          font-size: 35px;
          color: #333333;
          font-weight: bold;
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #cccccc;
          padding: 24px 0px;
          i {
            color: #2f82ff;
            font-size: 22px;
            margin-right: 6px;
            vertical-align: middle;
          }
        }
        .jibenxinxi {
          padding: 24px 0px;
          p {
            line-height: 45px;
            font-size: 28px;
            color: #333333;
            overflow: hidden;
            label {
              //font-weight: bold;
              display: inline-block;
              width: 150px;
              float: left;
              .widthnbsp {
                width: 32px;
                display: inline-block;
              }
              .widthnbspthree {
                width: 8px;
                display: inline-block;
              }
            }
            .detailsmessage {
              float: left;
              width: 66%;
              color: #666666;
            }
            .zhuangtai {
              font-weight: bold;
              color: #2f82ff;
            }
            .redMessage {
              font-weight: bold;
              color: #ff2f2f;
            }
          }
        }
      }
    }
    .paymentBtn {
      width: 95%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 35px;
      color: #ffffff;
      border-radius: 6px;
      margin: 40px auto;
      cursor: pointer;
      i {
        vertical-align: middle;
        margin-right: 4px;
      }
      .widthnbspwx {
        display: inline-block;
        width: 8px;
      }
    }
    .zhifubao {
      background-color: #009FE9;
    }
    .weixin {
      background-color: #1ea838;
    }
  }
</style>
